<template>
  <view class="flex flex-column align-center wh_750 pageHeight bg_F5F5F5">

    <s-header-title is-fixed is-display-back title="填写姓名" @getPageHeight="getPageHeight"></s-header-title>
    <view :style="{height:page.headerHeight + 'px'}"></view>
    <view class="wh_750 mt_131 flex flex-column align-center">
      <view class="tips  z_1">
        <text class="tips_overText">您的姓名</text>
      </view>
      <view class="tips mt_12 flex z_1">
        <text class="tips_littleText">例如:&nbsp;</text>
        <text class="tips_colorText">郑成功&nbsp;</text>
        <text class="tips_littleText">姓</text>
        <text class="tips_colorText">郑&nbsp;</text>
        <text class="tips_littleText">名</text>
        <text class="tips_colorText">成功</text>
      </view>
      <!--  中间姓名填写  -->
      <view class="basicInformation_content mt_86 flex align-center justify-between z_1">
        <view class="basicInformation_content_surname flex align-center" @click.stop="surnameFocus">
          <view class="basicInformation_content_surname_right flex align-center justify-center" @click.stop>
            <input :focus="form.surnameFocusFlag" type="text" v-model="form.surname" placeholder="尊姓"
                   placeholder-class="placeholder" class="basicInformation_input" @input="suernameInput"
                   @blur="surnameBlur"></input>
          </view>
        </view>
        <view class="basicInformation_content_surname flex align-center justify-center" @click.stop="nameFocus">
          <view class="basicInformation_content_surname_right flex align-center justify-center" @click.stop>
            <input :focus="form.nameFocusFlag" type="text" v-model="form.name" placeholder="大名"
                   placeholder-class="placeholder"
                   class="basicInformation_input" @input="nameInput" @blur="nameBlur"></input>
          </view>
        </view>
      </view>
      <!--  选择生日  -->
      <view class="basicInformation_dateBirth flex align-center justify-center mt_86 z_1"
            @click.stop="openBetterCalendar">
        <view class="basicInformation_dateBirth_right flex align-center justify-center">
          <view class="basicInformation_dateBirth_right_text" v-if="!!form.dateBirth">
            <text :style="{
                color:date.info.type == 'solar' ? '#FF4206' : '#9F9F9F',
                fontWeight:date.info.type == 'solar' ? 'bold' : '500',
              }">
              {{ dayjs(date.info.solarDate).format('YYYY年MM月DD日') }}
            </text>
            <text class="ml_18" :style="{
                color:date.info.type == 'lunar' ? '#FF4206' : '#9F9F9F',
                fontWeight:date.info.type == 'lunar' ? 'bold' : '500',
              }">
              {{ calendar.toChinaYear(date.info.lYear) }}{{ date.info.IMonthCn }}{{ date.info.IDayCn }}
            </text>
          </view>
          <view class="basicInformation_dateBirth_right_text" v-else>
            点击选择您的生日
          </view>
        </view>
      </view>
      <view class="basicInformation_finish flex align-center justify-center mt_73 z-1" @click.stop="goToPath">
        <text class="basicInformation_finish_text">完成</text>
      </view>
    </view>

    <s-better-calendar class="z-999" :maxYear="new Date().getFullYear()"
                       ref="betterCalendarRef"
                       :showCalendar="showCalendar.show"
                       @confirm="selectDate"
                       @cancel="showCalendar.show = false"
    ></s-better-calendar>
  </view>
</template>

<script setup>
  import { computed, reactive, ref } from 'vue';
  import sheep from '@/sheep';
  import sBetterCalendar from '@/sheep/components/s-better-calendar/s-better-calendar.vue';
  import { onLoad } from '@dcloudio/uni-app';
  import dayjs from 'dayjs';
  import calendar from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar';
  import SHeaderTitle from '@/sheep/components/s-header-title/s-header-title.vue';

  const pageStyle = reactive({
    background: { color: '#F5F5F5', src: '' },
  });
  const page = reactive({
    headerHeight: 0,
  });
  const scrollView_height = computed(() => {
    let height = 0;
    height = Number(sheep.$platform.device.statusBarHeight) + Number(sheep.$store('system_info').tabbar_height) + 44;
    return height;
  });
  const form = reactive({
    surname: '',
    surnameFocusFlag: false,
    name: '',
    nameFocusFlag: false,
    dateBirth: '',
    dateBirthFocusFlag: false,
  });
  const showCalendar = reactive({
    show: false,
  });
  let date = reactive({
    info: {
      Animal: '',
      IDayCn: '',
      IMonthCn: '',
      Term: null,
      astro: '魔羯座',
      day: 1,
      festival: '元旦节',
      gzDay: '乙巳',
      gzMonth: '戊子',
      gzYear: '乙丑',
      isLeap: false,
      isTerm: false,
      isToday: false,
      lDay: 21,
      lMonth: 11,
      lYear: 1985,
      lunarDate: '乙丑年冬月廿一',
      lunarDateNumber: '1985-11-21',
      month: 1,
      nWeek: 3,
      ncWeek: '星期三',
      solarDate: '1986-1-1',
      type: 'solar',
      year: 1986,
    },
  });
  let option = ref({});
  onLoad((options) => {
    option = options;
  });

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  function openBetterCalendar() {
    showCalendar.show = true;
  }

  function selectDate(data) {
    date.info = data;
    form.dateBirth = data.type == 'lunar' ? data.lunarDateNumber : data.solarDate;
    showCalendar.show = false;
  }

  function surnameFocus() {
    form.surnameFocusFlag = false;
    setTimeout(() => {
      form.surnameFocusFlag = true;
    }, 100);
  }

  function suernameInput(e) {
    if (e.target.value.length >= 1) {
      let arr;
      arr = e.target.value.match(/[\u4e00-\u9fa5]/g);
      if (!!arr) {
        form.surname = arr.join('').substring(0, 2);
      } else {
        form.surname = '';
      }
    }
  }

  function surnameBlur(e) {
    if (e.target.value.length > 0) {
      let arr;
      arr = e.target.value.match(/[\u4e00-\u9fa5]/g);
      if (!!arr) {
        form.surname = arr.join('').substring(0, 2);
      } else {
        form.surname = '';
      }
    }
  }

  function nameFocus() {
    form.nameFocusFlag = false;
    setTimeout(() => {
      form.nameFocusFlag = true;
    }, 100);
  }

  function nameInput(e) {
    if (e.target.value.length >= 1) {
      let arr;
      arr = e.target.value.match(/[\u4e00-\u9fa5]/g);
      if (!!arr) {
        form.name = arr.join('').substring(0, 4);
      } else {
        form.name = '';
      }
    }
  }

  function nameBlur(e) {
    if (e.target.value.length > 0) {
      let arr;
      arr = e.target.value.match(/[\u4e00-\u9fa5]/g);
      if (!!arr) {
        form.name = arr.join('').substring(0, 4);
      } else {
        form.name = '';
      }
    }
  }

  async function goToPath() {
    if (!form.surname) {
      uni.showToast({
        title: '请填写您的尊姓 例如：郑',
        icon: 'none',
        duration: 2500,
      });
      return;
    }
    if (!form.name) {
      uni.showToast({
        title: '请填写您的大名 例如：成功',
        icon: 'none',
        duration: 2500,
      });
      return;
    }
    if (!form.dateBirth) {
      uni.showToast({
        title: '请点击选择您的生日',
        icon: 'none',
        duration: 2500,
      });
      return;
    }
    uni.showLoading({
      title: '正在创建...',
      mask: true,
    });
    const { data, code } = await sheep.$api.user.updateUserInfo({
      surname: form.surname,
      daimyo: form.name,
      date: date.info.type == 'solar' ? date.info.solarDate : date.info.lunarDateNumber,
      gender: option.sex,
      time_type: date.info.type == 'solar' ? 2 : 1,
      is_leap_month: !!date.info.isLeap ? 2 : 1,
    });
    if (code == 1) {
      const res = await sheep.$store('user').getInfo()
      if(res){
        setTimeout(() => {
          uni.hideLoading();
          uni.switchTab({
            url: '/pages/message/genealogy',
          });
        }, 1500);
      }
    }
  }
</script>


<style scoped lang="scss">

  .tips {
    width: 662rpx;
    align-items: flex-end !important;

    &_overText {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 48rpx;
      color: #000000;
    }

    &_littleText {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #4B4B4B; //A0A0A0
    }

    &_colorText {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #FF4206;
    }
  }


  .basicInformation_content {
    width: 662rpx;

    .basicInformation_content_surname {
      .basicInformation_content_surname_left {
        .basicInformation_content_surname_left_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 38rpx;
          color: #4B4B4B;
        }
      }

      .basicInformation_content_surname_right {
        width: 295rpx;
        height: 100rpx;
        background: #FFFFFF;
        border-radius: 50rpx 50rpx 50rpx 50rpx;

        .basicInformation_input {
          width: 285rpx;
          text-align: center;
          font-size: 36rpx;
          font-weight: 500;
        }

        ::v-deep .placeholder {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 36rpx;
          color: #9F9F9F;
        }
      }
    }
  }

  .basicInformation_dateBirth {
    width: 662rpx;

    .basicInformation_dateBirth_left {
      .basicInformation_dateBirth_left_text {
        font-weight: 500;
        font-size: 38rpx;
        color: #4B4B4B;
      }
    }

    .basicInformation_dateBirth_right {
      width: 662rpx;
      height: 100rpx;
      background: #FFFFFF;
      border-radius: 50rpx 50rpx 50rpx 50rpx;

      .basicInformation_dateBirth_right_text {
        font-weight: 500;
        font-size: 36rpx;
        color: #9F9F9F;
      }
    }
  }

  .basicInformation_finish {
    width: 362rpx;
    height: 100rpx;
    background: #FF4206;
    border-radius: 50rpx 50rpx 50rpx 50rpx;

    &_text {
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }


  .timePopup {
    width: 750rpx;
  }
</style>
